analog clock - 4

            <div class="grid_A">
              <svg viewbox="0 0 500 500">
                  <circle id="a1" cx="50%" cy="50%" r="45%"/>
                  <circle id="a2" cx="50%" cy="50%" r="41%"/>
                  <circle id="a3" cx="50%" cy="50%" r="37%"/>
                  <span id="tijd"></span>
                  <span id="ampm"></span>
                  <span id="day"></span>
                  <span id="ddmmyyyy"></span>
              </svg>
              <style>
                svg{width: 40vw; height: 30vw; margin-left: 1vw; position:relative; left: 15%; top:5%; 
                    transform:translateX(-30%); background-image: url("../images/19.jpg");}
                circle{fill:crimson;stroke:cyan; stroke-width:12;transform-origin:50% 50%; 
                    stroke-linecap:round; stroke-dashoffset:300%; transform:rotate(-90deg);transition:1s linear;}
                #a3{fill:seagreen;}
                span{text-shadow:0px 0px 1px black; color:skyblue;}
                #tijd{position:absolute; font-size:2vw; padding:0.2vw; padding-left:1vw; padding-right:1vw; 
                    left:10vw; top:30vw; border-radius:1vw; text-shadow:0px 0px 1px black; user-select:none;}
                #ampm{position:absolute; font-size: 2vw;text-align:center; left: 20vw; top: 30vw; z-index: 1}
                #day{position:absolute; font-size:1.5vw; left: 10vw; top: 35vw; z-index: 1}
                #ddmmyyyy{position:absolute;font-size:1.6vw; left: 15vw; top: 40vw; z-index: 1;}
              </style>
              <script>
                  var am_pm,dayno;
                  //CALLS DATE PER 0.001S
                  setInterval(mngr,100);
                  //MANAGER
                  function mngr(){
                    progbar();
                    setTimeDate();
                  };
                  //ONE TIME CALL FOR DATE
                  dt();
                  //GET DATE TIME PM AM
                  function dt(retrnVal){
                      dateA= new Date();
                      
                      a=dateA.getHours();
                      if (a>12){a-=12; am_pm ="PM";}
                      else{if(a==0){a=12;}; am_pm="AM";};
                      
                      a=fx(a);
                      b=fx(dateA.getMinutes());
                      c=fx(dateA.getSeconds());
                      
                      dayno=dateA.getDay();
                      day=fx("day");
                      date=fx(dateA.getDate());
                      month=fx(dateA.getMonth()+1);
                      year=dateA.getFullYear();
                      
                      tym=a+":"+b+":"+c;
                      dmy=date+"/"+month+"/"+year;
                      return retrnVal;
                  };
        
                  //SMALL FIX FOR DATE
                  function fx(num){
                      if (num<=9){num="0"+num;};
                      if (num=="day"){
                          num=dayno;
                          switch (num){
                              case 1: num="Monday"; break;
                              case 2: num="Tuesday"; break;
                              case 3: num="Wednesday"; break;
                              case 4: num="Thursday"; break;
                              case 5: num="Friday"; break;
                              case 6: num="Saturday"; break;
                              case 0: num="Sunday"; break;
                          };
                      };
                      return num;
                  };
        
                  //SETS DATE, TIME, DAY
                  function setTimeDate(){
                      tijd.innerHTML=dt(tym);
                      ampm.innerHTML=am_pm;
                      day.innerHTML=dt(day);
                      ddmmyyyy.innerHTML =dt(dmy);
                  };
        
                  //PROGRESS BAR
                  function progbar(){
                      a1.style.strokeDasharray=300+(dt(c)/60)*(584-300)+"%";
                      b = (dt(b)==0) ? 0.01 :dt(b);
                      a2.style.strokeDasharray=300+(b/60)*(556-300)+"%";
                      a = (dt(a)==12) ? 0.001 :dt(a);
                      a3.style.strokeDasharray=300+(a/12)*(533-300)+"%";
                  };
              </script>